<template>
  <div>
    <div class="pic">
      <div class="search">
        <van-search v-model="value" placeholder="请输入小区或地址">
          <template #left>
            <div
              @click="
                $router.push({
                  path: '/selectMap',
                  query: { currentCity: currentCity, index: 'home' }
                })
              "
            >
              {{ currentCity }}
            </div>
            <i
              class="iconfont icon-CaretDown"
              style="color: #969799; font-size: 14px; padding-top: 10px"
            ></i>
          </template>
        </van-search>
        <div class="map" @click="$router.push('/selectMap')">
          <i
            class="iconfont icon-ditu4"
            style="color: white; font-size: 22px"
          ></i>
          <van-icon name="icon-ditu4" color="white" size="25px" />
        </div>
      </div>

      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="100%" height="212px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tbody">
      <van-grid :border="false">
        <van-grid-item icon="wap-home-o" text="整租" to="/FindHouse" />
        <van-grid-item icon="friends-o" text="合租" to="/FindHouse" />
        <van-grid-item icon="location-o" text="地图找房" to="/login" />
        <van-grid-item icon="home-o" text="去出租" to="/login" />
      </van-grid>
    </div>
    <div class="tfooter">
      <span class="left">租房小组</span><span class="right">更多</span>
      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data () {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 300px;
  text-align: center;
  background-color: #39a9ed;
}
.pic {
  // height: 212px;
  .search {
    position: absolute;
    top: 25px;
    width: 100%;
    padding: 0 10px;
    z-index: 2;
  }
}
.tbody {
  height: 122px;
}
.tfooter {
  padding-left: 10px;
  .left {
    font-weight: 600;
  }
  .right {
    margin-left: 250px;
  }
}
</style>
